<template>
  <div class="app-container">
    <el-form ref="form" :model="hospitalSetVo" label-width="120px">
      <el-form-item label="医院名称">
        <el-input style="width: 400px" v-model="hospitalSetVo.hospitalName"/>
      </el-form-item>
      <el-form-item label="医院编号">
        <el-input style="width: 100px" v-model="hospitalSetVo.hospitalCode"/>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input style="width: 200px" v-model="hospitalSetVo.contactName"/>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input style="width: 200px" v-model="hospitalSetVo.contactPhone"/>
      </el-form-item>
      <el-form-item label="医院官网">
        <el-input style="width: 500px" v-model="hospitalSetVo.apiUrl"/>
      </el-form-item>
      <el-form-item label="锁定">
        <el-switch v-model="switchStatus" @change="handleSwitchChange" />
      </el-form-item>
      <el-form-item>
        <el-button v-if="id===0"  type="primary" @click="onSubmit">保存</el-button>
        <el-button v-else type="primary" @click="onUpdate">修改</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script  lang="ts">
import { saveHospitalSet, getById, updateHospitalSet } from '/@/api/hospital'
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { useRoute,useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'hospitalAdd',
  setup(){
    const data=reactive({
      hospitalSetVo: {
        hospitalName:'',
        hospitalCode:'',
        contactName:'',
        contactPhone:'',
        apiUrl:'',
        status:0
      },
      id: 0,
      switchStatus: false
    })
    const route = useRoute();
    const router = useRouter();
    const { proxy } = getCurrentInstance() as any;
    	// 2、关闭当前 tagsView
		const closeCurrentTagsView = () => {
			proxy.mittBus.emit('onCurrentContextmenuClick', {
				id: 1,
				path: route.path,
			});
		};
    // 1、刷新detail.vue
		const refreshCurrentTagsView = () => {
			proxy.mittBus.emit('onCurrentContextmenuClick', {
				id: 0,
				path: '/system/hospital/detail',
			});
		};
    const onSubmit= ()=> {
      saveHospitalSet(data.hospitalSetVo)
        .then((result:any) => {
          if (result.code === 200) {
            ElMessage.success('保存成功！')
            //关闭导航栏标签
            closeCurrentTagsView()
            refreshCurrentTagsView()
            // 页面跳转
            router.push('/system/hospital/detail')
          }
        })
    }
    const onCancel=()=> {
      ElMessage.info('操作取消!')
      //关闭导航栏标签
      closeCurrentTagsView()
      refreshCurrentTagsView()
      // 页面跳转
      router.push('/system/hospital/detail')
    }
    const getHospitalSetById=(id:number)=>{
      getById(id)
        .then(result => {
          data.hospitalSetVo = result.data
          data.switchStatus = data.hospitalSetVo.status === 1 // 修复el-switch不能反显wt
        }).catch(error => {
          console.log(error)
        })
    }
     const onUpdate= ()=> {
      updateHospitalSet(data.hospitalSetVo)
        .then((result:any) => {
          if (result.code === 200) {
            //清空
            // data.id=0
            // data.hospitalSetVo=<any>{}
            // data.switchStatus=false
            //关闭导航栏标签
             closeCurrentTagsView()
             refreshCurrentTagsView()
            // 页面跳转
            router.push('/system/hospital/detail')
          }
        }).catch(error => {
          console.log(error)
        })
    }
    const handleSwitchChange= (val:boolean)=> { // 修复el-switch不能反显wt
      data.hospitalSetVo.status = val === true ? 1 : 0
    }
    const initData=()=>{
      if (route.params && (<string>route.params.id)) {
        data.id =Number.parseInt(route.params.id as string)
        getHospitalSetById(data.id)
      }
    }
    //调用
    onMounted(()=>{
     initData()
    })
    return{
      ...toRefs(data),
      onSubmit,
      onCancel,
      getHospitalSetById,
      onUpdate,
      handleSwitchChange,
       closeCurrentTagsView,
          refreshCurrentTagsView
    }
  }
})
</script>

<style scoped>
.line{
  text-align: center;
}
</style>
